<template>
  <div class="exam-center">
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card>
          <h2 style="text-align: center; margin-bottom: 8px">可参加的试卷</h2>
          <div v-if="papers.length">
            <div v-for="p in papers" :key="p.id" style="padding: 12px 0">
              <div style="display:flex; justify-content: space-between; align-items: center">
                <div>
                  <div style="font-weight:700">{{ p.title }}</div>
                  <div style="font-size:12px; color: #666">{{ p.description }}</div>
                </div>
                <div>
                  <el-button type="primary" size="small" @click="start(p)">开始考试</el-button>
                </div>
              </div>
            </div>
          </div>
          <div v-else style="text-align: center; padding: 20px">暂无可用试卷</div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card>
          <h2 style="text-align: center; margin-bottom: 8px">我的考试记录</h2>
          <el-table v-if="Array.isArray(records)" :data="records" style="width: 100%">
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column label="试卷">
              <template #default="{ row }">{{ row.paper ? row.paper.title : '' }}</template>
            </el-table-column>
            <el-table-column prop="score" label="得分" width="80" />
            <el-table-column prop="status" label="状态" width="100" />
            <el-table-column label="操作" width="120">
              <template #default="{ row }">
                <el-button size="mini" @click="view(row.id)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '/@/utils/request'
import { ElMessage } from 'element-plus'

const papers = ref([])
const records = ref([])

function fetchPapers() {
  request
    .get('/api/exam/paperList')
    .then((res) => {
      if (res.code === 1) papers.value = res.data
      else console.warn('fetchPapers unexpected response', res)
    })
    .catch((err) => {
      console.error('fetchPapers error', err)
      ElMessage.error('加载试卷失败')
    })
}
function fetchRecords() {
  request
    .get('/api/exam/myPapers')
    .then((res) => {
      if (res.code === 1) records.value = res.data
      else console.warn('fetchRecords unexpected response', res)
    })
    .catch((err) => {
      console.error('fetchRecords error', err)
      ElMessage.error('加载考试记录失败')
    })
}
function start(p) {
  console.log('start exam', p && p.id)
  request
    .post('/api/exam/start/paper_id/' + p.id)
    .then((res) => {
      if (res.code === 1) {
        // 跳转到主考试页并携带 user_paper_id
        window.location.hash = '#/exam?user_paper_id=' + res.data.user_paper_id + '&paper_id=' + p.id
      } else {
        ElMessage.error(res.msg || '无法开始考试')
      }
    })
    .catch((err) => {
      console.error('start error', err)
      ElMessage.error('开始考试失败')
    })
}
function view(id) {
  console.log('view user_paper', id)
  window.location.hash = '#/exam?view_user_paper_id=' + id
}

onMounted(() => {
  console.log('exam center mounted')
  try {
    fetchPapers()
    fetchRecords()
  } catch (e) {
    console.error('onMounted error', e)
  }
})
</script>

<style scoped>
.exam-center {
  max-width: 1100px;
  margin: 20px auto;
}
</style>
